<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <div>
                    <el-row :gutter="30">
                        <el-col :span="7">
                            <el-input placeholder="客户姓名" @clear="query" v-model="condition.customerName" clearable
                                size="large">
                                <template #append>
                                    <el-button type="info" @click="query" style="color:black">查询</el-button>
                                </template>
                            </el-input>
                        </el-col>
                    </el-row>
                </div>
            </el-header>
            <el-divider style="margin:0"></el-divider>
            <el-main>
                <el-row :gutter="20">
                    <el-col :span="9">
                        <div class="table-main">
                            <div class="table-main-header">客户信息</div>
                            <!-- 表格 -->
                            <el-table :data="khxxList" highlight-current-row @current-change="handleChangeCustomer"
                                size="small" style="width: 100% ;color:black;" stripe>
                                <el-table-column align="center" fixed type="index" :index="indexMethod" label="序号"
                                    width="40" />
                                <el-table-column align="center" prop="customerName" label="姓名" />
                                <el-table-column align="center" prop="customerAge" label="年龄" />
                                <el-table-column align="center" prop="customerSex" label="性别">
                                    <template #default="scope">{{ scope.row.customerSex == 0 ? '男' : '女' }}</template>
                                </el-table-column>
                                <el-table-column align="center" prop="bedNo" label="床号" width="90" />
                                <el-table-column align="center" prop="levelName" label="护理级别" />
                            </el-table>
                            <!-- 分页插件 -->
                            <div style="margin-top:15px">
                                <el-pagination :page-size="page.pageSize" background :current-page="page.currentPag"
                                    layout=" prev, pager, next" :total="page.total"
                                    @current-change="handleCurrentChange" />
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="15">
                        <div class="table-main">
                            <div class="table-main-header">护理记录</div>
                            <!-- 表格 -->
                            <el-table :data="nurseRecordList" size="small">
                                <el-table-column align="center" :index="indexMethodRecord" type="index" label="序号"
                                    width="40" />
                                <el-table-column align="center" prop="serialNumber" label="护理项目编号" width="100" />
                                <el-table-column align="center" prop="nursingName" label="护理项目名称" width="100" />
                                <el-table-column align="center" prop="nursingCount" label="护理数量" width="70" />
                                <el-table-column align="center" prop="nursingContent" label="护理内容" width="100" />
                                <el-table-column align="center" prop="nickname" label="护理人员" width="80" />
                                <el-table-column align="center" prop="phoneNumber" label="护理人员号码" width="100" />
                                <el-table-column align="center" prop="nursingTime" label="护理时间" width="100" />

                                <el-table-column align="center" label="操作" width="100">
                                    <template #default="scope">
                                        <el-button type="danger" size="small" round plain
                                            @click="del(scope.row.id)">移除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <!-- 分页插件 -->
                            <div style="margin-top:15px" v-if="nurseRecordList.length > 0">
                                <el-pagination :page-size="pageRecord.pageSize" background
                                    :current-page="pageRecord.currentPag" layout=" prev, pager, next"
                                    :total="pageRecord.total" @current-change="handleRecordChange" />
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getKhxxList } from "@/api/customerApi.js";
import { listNurseRecordsVo, removeCustomerRecord } from "@/api/nurseRecord.js";

// 响应式数据
const nurseRecordList = ref([]);
const khxxList = ref([]);

// 分页属性封装 --客户
const page = reactive({
    total: 0,
    pageSize: 6,
    currentPag: 1,
    pagCount: 0
});

// 分页属性封装 --护理记录
const pageRecord = reactive({
    total: 0,
    pageSize: 6,
    currentPag: 1,
    pagCount: 0
});

// 查询条件封装--客户
const condition = reactive({
    customerName: "",
    pageSize: "1" // 默认第一页
});

// 查询条件封装--护理记录
const conditionRecord = reactive({
    customerId: "", // 客户编号
    pageSize: "1" // 默认第一页
});

// 计算属性 - 分页序号不重复 - 客户
const indexMethod = computed(() => {
    return page.currentPag * page.pageSize - page.pageSize + 1;
});

// 计算属性 - 分页序号不重复 - 护理记录
const indexMethodRecord = computed(() => {
    return pageRecord.currentPag * pageRecord.pageSize - pageRecord.pageSize + 1;
});

// 点击查询
const query = () => {
    // 清空护理记录数据表
    nurseRecordList.value = [];
    conditionRecord.customerId = "";

    condition.pageSize = "1"; // 回到第一页
    fetchKhxxList();
};

// 选中页码-客户
const handleCurrentChange = (curPage) => {
    page.currentPag = curPage;
    condition.pageSize = curPage; // 参数pageSize是服务端接收页码参数名
    // 重新渲染表格
    fetchKhxxList();
    // 清空护理记录数据表
    nurseRecordList.value = [];
    conditionRecord.customerId = "";
};

// 选中某客户行:获取用户的服务项目列表
const handleChangeCustomer = (row) => {
    if (row != null) {
        // 点击页码会清空row因此做出判断逻辑
        // 构建查询条件
        conditionRecord.customerId = row.id;
        listNurseRecordsVoData();
    }
};

// 选中页码-护理记录
const handleRecordChange = (curPage) => {
    pageRecord.currentPag = curPage;
    conditionRecord.pageSize = curPage; // 参数pageSize是服务端接收页码参数名
    // 重新渲染表格:
    listNurseRecordsVoData();
};

// api-查询客户信息列表-分页
const fetchKhxxList = () => {
    getKhxxList(condition).then(res => {
        khxxList.value = res.data.records;
        page.total = res.data.total; // 总记录数
        page.pageSize = res.data.size; // 每页显示条数
        page.currentPag = res.data.current; // 当前页码
        page.pagCount = res.data.pages; // 总页数
    });
};

// api-查询客户护理记录
const listNurseRecordsVoData = () => {
    listNurseRecordsVo(conditionRecord).then(res => {
        nurseRecordList.value = res.data.records;
        pageRecord.total = res.data.total; // 总记录数
        pageRecord.pageSize = res.data.size; // 每页显示条数
        pageRecord.currentPag = res.data.current; // 当前页码
        pageRecord.pagCount = res.data.pages; // 总页数
    });
};

// api-删除客户护理记录
const del = (id) => {
    ElMessageBox.confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
    })
        .then(() => {
            removeCustomerRecord({ id: id }).then(res => {
                if (res.flag) {
                    ElMessage({
                        type: "success",
                        message: res.message
                    });
                    // 重载表格
                    listNurseRecordsVoData();
                }
            });
        })
        .catch(() => { });
};

// 页面加载时获取数据
onMounted(() => {
    fetchKhxxList();
});
</script>

<style scoped>
.table-main {
    height: 500px;
    border: 1px solid #d4c5c5;
}

.table-main .table-main-header {
    height: 50px;
    background-color: #3ca2e0;
    color: #fff;
    font-size: 20px;
    font-family: "Microsoft YaHei";
    line-height: 50px;
}
</style>